<template>
  <div class="Monitor">
    <logo></logo>
    <!-- 点击弹出层 -->
    <van-popup v-model="show" closeable>
      <div v-if="showContent.TableName == 'CO?'">CO₂</div>
      <div v-else>{{ showContent.TableName }}</div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了,只展示最新20条数据 ">
        <van-cell v-for="item in showlist" :key="item.AreaId" :title="'值：' + item.Value + '　　' + '创建时间：' + item.CreatedTime" />
      </van-list>
    </van-popup>

    <div class="content-nutrientSolution">营养液</div>
    <section class="monitor-item-list flex flex-wrap">
      <aside v-for="(item, index) in nutrientSolution" :key="index">
        <template>
          <van-cell is-link @click="showPopup(item)">
            <div class="flex flex-box">
              <img :src="imgObj[item.Code]" class="img-icon" />
              <div class="monitor-text text-align-left">
                <p v-if="item.TableName == 'CO?'">CO₂</p>
                <p v-else>{{ item.TableName }}</p>
                <p v-if="item.Value == '111'">
                  <span :class="item.Code">高</span>
                  <span>{{ item.unit }}</span>
                </p>
                <p v-else-if="item.Value == '011'">
                  <span :class="item.Code">中</span>
                  <span>{{ item.unit }}</span>
                </p>
                <p v-else-if="item.Value == '001'">
                  <span :class="item.Code">低</span>
                  <span>{{ item.unit }}</span>
                </p>
                <p v-else>
                  <span :class="item.Code">{{ item.Value }}</span>
                  <span>{{ item.unit }}</span>
                </p>
              </div>
            </div>
          </van-cell>
        </template>
      </aside>
    </section>

    <div class="content-nutrientSolution">内部</div>
    <section class="monitor-item-list flex flex-wrap">
      <aside v-for="(item, index) in inside" :key="index">
        <template>
          <van-cell is-link @click="showPopup(item)">
            <div class="flex flex-box">
              <img :src="imgObj[item.Code]" class="img-icon" />
              <div class="monitor-text text-align-left">
                <p v-if="item.TableName == 'CO?'">CO₂</p>
                <p v-else>{{ item.TableName }}</p>
                <p>
                  <span :class="item.Code">{{ item.Value }}</span>
                  <span>{{ item.unit }}</span>
                </p>
              </div>
            </div>
          </van-cell>
        </template>
      </aside>
    </section>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from '@/components/Tabbar.vue'
import logo from '@/components/Logo.vue'
import { log } from 'util'
// 导入通信js
var signalR = require('../../assets/js/signalr')
export default {
  name: 'Monitor',
  components: {
    logo,
    tabbar
  },
  data() {
    return {
      monitorlist: [],
      inside: [], //外部的
      nutrientSolution: [], // 营养液
      imgObj: {
        T: require('../../assets/img/T.png'),
        C: require('../../assets/img/C.png'),
        E: require('../../assets/img/E.png'),
        WL: require('../../assets/img/WL.png'),
        H: require('../../assets/img/H.png'),
        P: require('../../assets/img/P.png'),
        WT: require('../../assets/img/WT.png'),
        LX: require('../../assets/img/LX.png')
      },
      show: false,
      showContent: {
        page: '',
        limit: '',
        EquipmentId: '',
        TableNames: '',
        sidx: '',
        Sord: ''
      },
      // 点击弹出来的数据
      showlist: [],
      loading: false,
      finished: false
    }
  },
  created() {},
  mounted() {
    // this.getMonitor()
    this.communication()
    this.getMonitor()
  },
  methods: {
    communication() {
      var connection = new signalR.HubConnectionBuilder().withUrl('http://120.79.190.214:100/chat').build()
      connection.on('GetEquipmentSensorRecordByAreaId', function(tem) {
        console.log(tem)
        $('.' + tem.matchcode).text(tem.value)
      })
      // 这个是发起请求
      // connection.start().then(function() {
      //   connection.invoke('Send', '')
      //   event.preventDefault()
      // })
      connection.start().then(function() {
        connection.invoke('Send', $('#Id').val())
        event.preventDefault()
      })
    },
    getMonitor() {
      this.$http
        .post(`EquipmentSensorRecord/GetEquipmentSensorRecordByAreaId`, { Id: 'ddef2c8b-f434-4fc4-a3a5-db8ecfe35ef1' })
        .then(res => {
          let myData = res.data
          myData.map(respones => {
            if (respones.DetectionType == 2) {
              this.nutrientSolution.push(respones)
              console.log(this.nutrientSolution)
            }
          })
          myData.map(respones => {
            if (respones.DetectionType == 3) {
              this.inside.push(respones)
              console.log(this.inside)
            }
          })
        })
        .catch(() => {})
    },
    async showPopup(item) {
      this.show = true
      console.log(item)
      console.log(item.EquipmentId)
      console.log(item.TableName)
      console.log(item.CreatedTime)
      this.showContent = item
      const { data: res } = await this.$http.post(`EquipmentSensorRecord/GetPagingEquipmentSensorRecord`, {
        page: 1,
        limit: 20,
        EquipmentId: item.EquipmentId,
        TableNames: item.Code,
        Sord: 'DESC',
        sidx: 'e.CreatedTime'
      })
      this.finished = true
      console.log(res.data)
      this.showlist = res.data
    }
  }
}
</script>

<style lang="less" scoped>
.Monitor {
  background: #efefef;
}
.content-nutrientSolution {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.2rem;
  padding: 0 20px;
}
.monitor-item-list {
  color: #fff;
  // background: #0d2732;

  height: 100%;
  // min-height: 38rem;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px dashed #ccc;
  // padding-bottom: 2rem;
  aside {
    width: 50%;
    // padding-left: 30px;
    width: 49%;
    padding-top: 20px;
    box-sizing: border-box;
    .van-cell {
      padding: 0;
      background-color: unset;
      border-radius: 10px;
      .flex.flex-box {
        background: #fff;
        height: 6rem;
        box-shadow: 16px 16px 14px 15px #000;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 27px;
      }
    }
    .van-cell__right-icon {
      display: none;
    }
    .van-popup {
      width: 98% !important;
      height: 22rem !important;
      background-color: rgba(255, 255, 255, 0);
    }
    div {
      p {
        margin: 0;
        padding: 0;
        font-size: 1rem;
        margin-left: 1rem;
        color: #000;
        // font-weight: bold;
      }
    }
  }
  aside:nth-child(1) {
    padding: 0;
  }
  aside:nth-child(2) {
    padding: 0;
  }
}
</style>
